@page "~/manager/media/{folderId?}"
@model MediaListViewModel
@inject IAuthorizationService Auth
@inject ManagerLocalizer Localizer
@{
    ViewBag.MenuItem = "Media";
    var folderId = @RouteData.Values["folderId"];
}
@section script
{
    <script src="~/manager/assets/js/piranha.media.min.js?v=@Piranha.Utils.GetAssemblyVersionHash(typeof(Piranha.Manager.Module).Assembly)"></script>

    <script>
        piranha.permissions.load(function () {
            piranha.media.load("@folderId", true);
        });
    </script>
}
<div id="media">
    <div class="top">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">@Localizer.Menu["Content"]</li>
                <li class="breadcrumb-item active" aria-current="page">@Localizer.Menu["Media"]</li>
            </ol>
        </nav>

        <div v-if="!loading" class="container-fluid">
            <div class="top-nav">
                @foreach (var action in Piranha.Manager.Actions.Toolbars.MediaList)
                {
                    <partial name="@action.ActionView" />
                }
            </div>
        </div>
    </div>

    <div class="app" :class="{ ready: !loading }">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-4">
                    <div class="mb-3">
                        <button class="btn btn-sm btn-primary" v-on:click="editAddFolder()">
                            <i class="fas fa-plus"></i>
                        </button>
                        <button v-if="currentFolderId != null" v-on:click="editFolder()" class="btn btn-sm btn-primary">
                            <i class="fas fa-pen"></i>
                        </button>
                        <button v-if="currentFolderId != null && canDelete" class="btn btn-sm btn-danger" v-on:click.prevent="removeFolder(currentFolderId)">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                    <div class="dd folder-container">
                        <ol class="folders dd-list">
                            <li class="droppable" :class="{ active: currentFolderId === null }" v-on:dragover="dragover" v-on:dragleave="dragleave" v-on:drop="drop($event, null)">
                                <a v-on:click.prevent="load()" href="#">
                                    <i class="fas fa-hdd"></i>@Localizer.Media["Media"]
                                    <span class="badge badge-light float-right">{{ rootCount }}</span>
                                </a>
                                <ol v-if="currentFolderId === null && isAdding" class="dd-list">
                                    <form v-on:submit.prevent="addFolder()" class="d-inline-block">
                                        <i class="fas fa-folder"></i><input id="add-folder" type="text" v-on:keyup.esc="isAdding = false" v-model="folder.name" class="form-control form-control-sm d-inline-block w-auto">
                                    </form>
                                </ol>
                            </li>
                            <ol class="dd-list">
                                <folder-item v-for="item in structure" v-bind:key="item.id" v-bind:selected="currentFolderId" v-bind:item="item"></folder-item>
                            </ol>
                        </ol>
                    </div>
                </div>
                <div class="col-lg-9 col-8">
                    <div class="d-flex mb-3">
                        <button v-on:click="showGallery()" class="btn btn-sm" :class="{ 'btn-light': !listView, 'btn-white': listView }">
                            <i class="fas fa-table"></i>
                        </button>
                        <button v-on:click="showList()" class="btn btn-sm" :class="{ 'btn-light': listView, 'btn-white': !listView }">
                            <i class="fas fa-list"></i>
                        </button>
                        <button class="btn btn-sm btn-danger ml-auto" v-show="hasSelection" v-on:click="removeSelection()">
                            <i class="fas fa-trash"></i> @Localizer.Media["Delete selected media"]
                        </button>
                    </div>
                    @if ((await Auth.AuthorizeAsync(User, Permission.MediaAdd)).Succeeded)
                    {
                        <div id="media-upload-container" class="dropzone-container mb-3">
                            <form action="@Url.Action("Upload", "MediaApi")" class="dropzone needsclick dz-clickable" enctype="multipart/form-data">
                                <input type="hidden" name="Model.ParentId" v-model="currentFolderId" />
                                <div class="dz-message needsclick text-center">
                                    <span class="fas fa-cloud-upload-alt"></span>
                                    @Localizer.Media["Drop files here or click to upload."]
                                </div>
                                <div class="file-list"></div>
                            </form>
                            <ul class="media-list list-unstyled"></ul>
                        </div>
                    }

                    <partial name="Partial/_MediaGallery" />
                    <partial name="Partial/_MediaList" />
                </div>
            </div>
        </div>
    </div>
    <partial name="Partial/_MediaFolderModal" />
</div>